<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>${systemName}</title>
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/client.css">
</head>
<body>

<jsp:include page="/WEB-INF/views/client/common/nav.jsp"/>

<div class=" banner bg-white mb-4">
    <div id="carouselExampleCaptions" class="container carousel slide" data-bs-ride="carousel"
         data-bs-interval="3000">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="${pageContext.request.contextPath}/image/banner/1.png" class="d-block w-100" alt="...">
                <%--            <div class="carousel-caption d-none d-md-block">--%>
                <%--                <h5>First slide label</h5>--%>
                <%--                <p>Some representative placeholder content for the first slide.</p>--%>
                <%--            </div>--%>
            </div>
            <div class="carousel-item">
                <img src="${pageContext.request.contextPath}/image/banner/2.jpg" class="d-block w-100" alt="...">
                <%--            <div class="carousel-caption d-none d-md-block">--%>
                <%--                <h5>Second slide label</h5>--%>
                <%--                <p>Some representative placeholder content for the second slide.</p>--%>
                <%--            </div>--%>
            </div>
            <div class="carousel-item">
                <img src="${pageContext.request.contextPath}/image/banner/3.jpg" class="d-block w-100" alt="...">
                <%--            <div class="carousel-caption d-none d-md-block">--%>
                <%--                <h5>Third slide label</h5>--%>
                <%--                <p>Some representative placeholder content for the third slide.</p>--%>
                <%--            </div>--%>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>




<!-- Category Navigation -->
<div class="category container mb-4">
    <nav class=" nav bg-white  py-2">
        <a class="nav-link ${empty categoryId ? 'active' : ''}"
           href="${pageContext.request.contextPath}/client/product?method=search">
            所有
        </a>

        <c:forEach items="${categoryList}" var="category">
            <a class="nav-link ${categoryId eq category.id ? 'active' : ''}"
               href="${pageContext.request.contextPath}/client/product?method=search&categoryId=${category.id}">
                    ${category.name}
            </a>
        </c:forEach>
    </nav>

</div>
<div class="container flex-grow-1">
    <div class="row row-cols-1 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-0">
        <c:forEach items="${productList}" var="product">
            <div class="col">
                <div class="card h-100 border-0 rounded-0 border-end border-bottom"
                     style="border-color: #e9ecef !important; padding-top: 15px; box-shadow: none;">
                    <!-- 图片部分 - 添加链接 -->
                    <a href="${pageContext.request.contextPath}/client/product?method=detail&id=${product.id}" style="text-decoration: none; color: inherit;">
                        <div class="ratio ratio-1x1" style="--bs-aspect-ratio: 100%; margin: 0 auto; width: 80%;">
                            <img
                            <c:choose>
                            <c:when test="${product.image != null && product.image.contains('.')}">
                                    src="${pageContext.request.contextPath}/image/product/${product.image}"
                            </c:when>
                            <c:otherwise>
                                    src="${pageContext.request.contextPath}/public?method=image&id=${product.image}"
                            </c:otherwise>
                            </c:choose>
                                    class="card-img-top p-2 object-fit-contain"
                                    alt="${product.name}">
                        </div>

                        <!-- 书名（居中） -->
                        <div class="card-body p-2 text-center" style="padding-top: 10px !important;">
                            <h6 class="card-title text-truncate mb-0">${product.name}</h6>
                        </div>
                    </a>

                    <!-- 价格+按钮（同行左右布局） -->
                    <div class="card-footer bg-transparent border-0 p-2">
                        <div class="d-flex justify-content-center align-items-center">
                            <div class="text-danger fs-5">¥${product.price}</div>
                            <div class="text-muted fs-7 text-decoration-line-through" style="margin-left: 10px">
                                ¥${product.price+20}</div>
                        </div>
<%--                        <div class="d-flex justify-content-center align-items-center">--%>
<%--                            <a class="btn btn-sm btn-outline-danger py-1 px-3"--%>
<%--                               href="${pageContext.request.contextPath}/cart?m=create&productId=${product.id}" role="button">加入购物车</a>--%>
<%--                        </div>--%>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
</div>

<jsp:include page="/WEB-INF/views/client/common/footer.jsp"/>
</body>
</html>
